<template>
  <div>
    <van-nav-bar
  title="个人中心"
  left-text="返回"
  left-arrow
  @click-left="$router.back()"
/>
      <div class="header">
       <img class='ava' :src="$baseURL+head_img" alt="" @click="$router.push('/userdit')">
       <div class="info">
         <p class="name">
           <i class="iconfont iconxingbienan"></i>
           <span>{{nickname}}</span>
         </p> 
         <p class="date">{{ create_date}}</p>
       </div>
       <i class="iconfont iconjiantou1"></i>
      </div>
      <div class="aa"></div>
      <van-cell title="我的关注" value="关注的用户"  is-link @click="$router.push('/attention')"/>
      <van-cell title="我的跟帖"  value="跟帖/回复" is-link to="/usecomment"/>
      <van-cell title="我的收藏"  value="文章/视频" @click="$router.push('/collect')"  />
      <van-cell title="设置" is-link  />

  </div>
</template>

<script>
import { getUserInfo } from '@/untails/mytoken'
import {userDetail} from '../api'
// import baseURL from '@/untails/baseURL'

export default {
  data () {
    return {
      gender:0,
      head_img:'',
      nickname:'游客',
      create_date:''
    }
  },
  mounted(){
    const {id}=getUserInfo();
    console.log(id);
    
    userDetail(id).then((res)=>{
      console.log(res);
      
      const {message,data}=res.data
      this.gender=data.gender
      this.head_img=data.head_img 
      this.nickname=data.nickname
      this.create_date=data.create_date.slice(0,10)
    })
  }
}
</script>

<style lang="less" scoped>
.header {
  height: 120px;
  padding: 20px 0;
  display: flex;
  align-items: center;
  .ava {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     margin-left: 20px;
  }

  .info {
    flex: 1;
    padding: 0 13px;
    .name {
      .iconxingbienan {
        padding-right: 5px;
        color: skyblue;
      }

      span {
         font-size: 14px;
         color: black;
      }
    }

    .date {
      margin-top: 3px;
          font-size: 14px;
          color: #a3a3a3;
    }
  }

  .iconfont.iconjiantou1 {
    font-size: 20px;
    padding-right: 8px;
    color: #ccc;
  }
}
</style>